<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>引导提示通知</title>
    <link rel="stylesheet" type="text/css" href="../css/mview.css?v=20230607116">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/c/font_4109983_utw78lyr7o.css">
    <script type="text/javascript" src="https://duoyue.moreqifu.cn/assets/libs/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/cascader.css" type="text/css">
</head>

<body>
    <div class="notice" style="margin-bottom: 30px;"></div>
    <div class="m-card" id="unit_from_card" style="margin: 10px 0;">
        我是下方内容
    </div>
    <div class="m-notice">
        <div class="m-notice-left">
            <span>HOT</span>
            <font>天天外链 x 腾讯云 联合推出了官方小程序版本；点击前往</font>
            <a href="#">摩尔营销通</a>
            <font>免费体验（PS:一般情况下成本低于自己上架小程序）。</font>
        </div>
        <i class="iconfont icon-guanbi"></i>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            mviewTopNotice("unit_from_notice",0,'说明','将表单放入落地页，客户填写表单自动拉起获客助手加粉；客户添加企微后转化宝自动备注电话号码到企微','https://moreqifu.com/blog/a/713','unit_from_card','.notice');
        });
    </script>
    <div class="m-data-card">
        <ul>
            <li><b>100000</b><p>今日访问</p></li>
            <li><b>8888</b><p>今日注册</p></li>
            <li><b>9999</b><p>今日流失</p></li>
            <li><b>9999</b><p>今日会话</p></li>
        </ul>
    </div>

    <div class="m-card" style="margin-top: 15px;margin-left:300px;">
        <div class="m-navbar-header">
            <ul>
                <li class="active" data="qrcode">基本信息</li>
                <li data="copy">数据统计</li>
                <li data="basic">数据列表</li>
                <li data="record">数据记录</li>
            </ul>
        </div>
        <div class="m-info-item showtip">
            <label>姓名</label>
            <div class="text">
                <i class="iconfont icon-shezhi"></i>
                <p>成功提示 <font>点击此处弹出提示</font></p>
            </div>
        </div>
        <div class="m-info-item">
            <label>落地页备注:</label>
            <div class="links"><font id="site_name_DN8MBGj9CaGMg2No">点击这里弹出公告</font><a href="javascript:;" onclick="updateSiteLists('DN8MBGj9CaGMg2No','落地页DN8MBGj9CaGMg2No');"><i class="bx bx-edit-alt"></i>修改备注</a></div>
        </div>
        <div class="m-info-item">
            <label>姓名</label>
            <div class="links">
                <a href="javascript:;"><i class="iconfont icon-shezhi"></i>修改配置</a>
                <p>或者</p>
                <a href="javascript:;"><i class="iconfont icon-shezhi"></i>查看配置</a>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../js/guide-notice.js"></script>

    <form style="margin:30px auto;width:120px;">
        <div id="cascader"></div>
    </form>
    <div class="m-model">
        <div class="m-model-position">
            <div class="m-model-start">
                <div class="m-model-title">
                    <font>这里是标题这里是标题这里是标题这里是标题这里是标题</font>
                    <i class="iconfont icon-guanbi" id="notice-close"></i>
                </div>
                <div class="m-model-content">
                    <div>按跳转量付费无需自备跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按</div>
                    <font>备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需自备小程序跳转更稳定按跳转量付费无需</font>
                </div>
                <div class="m-model-foot">
                    <span>取消</span>
                    <span>确认</span>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../js/cascader.js"></script>
    <script type="text/javascript" src="../js/mview.js"></script>
    <script type="text/javascript">
        // languages.js
        var languages = [
            {
              "indexcode": "1",
              "name": "Front-End",
              "s": [
                {
                "indexcode": "11",
                "name": "HTML",
                  
                },
                {
                "indexcode": "12",
                "name": "CSS",
                  
                },
                {
                "indexcode": "13",
                "name": "JavaScript",
                  "s": [
                    {
                        "indexcode": "131",
                        "name": "jQuery"
                    },
                    {
                        "indexcode": "122",
                        "name": "Angular"
                    },
                    {
                        "indexcode": "123",
                        "name": "React"
                    },
                  ]
                },
              ]
            },

            {
              "indexcode": "2",
              "name": "Back-End",
              "s": [
                {
                "indexcode": "21",
                "name": "C",
                  "s": [
                    {
                        "indexcode": "211",
                        "name": "C"
                    },
                    {
                        "indexcode": "212",
                        "name": "C++"
                    },
                    {
                        "indexcode": "213",
                        "name": "C#"
                    },
                  ]
                },
                {
                "indexcode": "22",
                "name": "Database",
                  "s": [
                    {
                        "indexcode": "221",
                        "name": "MySql"
                    },
                    {
                        "indexcode": "222",
                        "name": "SQL"
                    },
                    {
                        "indexcode": "223",
                        "name": "Oracle"
                    },
                  ]
                },
                {
                "indexcode": "23",
                "name": "Others",
                  "s": [
                    {
                        "indexcode": "231",
                        "name": "Node.js"
                    },
                    {
                        "indexcode": "122",
                        "name": "Python"
                    },
                    {
                        "indexcode": "123",
                        "name": "Ruby"
                    },
                  ]
                },
                // feel free to add your own data to the dropdown
                {
                "indexcode": "24",
                "name": "jQueryScript",
                  "s": [
                    {
                        "indexcode": "241",
                        "name": "jQueryScript"
                    },
                    {
                        "indexcode": "242",
                        "name": "CSSScript"
                    },
                    {
                        "indexcode": "243",
                        "name": "VueScript"
                    },
                  ]
                },
              ]
            }
        ];
        $(function(){
          // parse the data
            languages.forEach(function(item){
                item.label = item.name
                item.value = item.indexcode
                item.children = item.s
                item.s.forEach(function(item2){
                    item2.label = item2.name
                    item2.value = item2.indexcode
                    if (item2.s && item2.s.length) {
                        item2.children = item2.s
                        item2.s.forEach(function(item3){
                            item3.label = item3.name
                            item3.value = item3.indexcode
                        })
                    }
                })
            })
            // initialize the plugin on the input field and done
            $('#cascader').zdCascader({
                data: languages,
                container: '#cascader',
                onChange: function(value, label, datas){
                console.log(value, label, datas);
                }
            });
            document.body.addEventListener('click', function(event) {
                if (event.target.id === 'notice-close') {
                    var modelElements = document.querySelectorAll('.m-model');
                    for (var i = 0; i < modelElements.length; i++) {
                        modelElements[i].style.display = 'none';
                    }
                }
            });
            document.querySelectorAll('.links').forEach(function(link) {
                link.addEventListener('click', function() {
                    document.querySelectorAll('.m-model').forEach(function(model) {
                        model.style.display = 'block';
                    });
                });
            });
        })

    </script>

</body>

</html>